/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {
  Form, Input, Radio, Select, Icon,
  Upload, Tooltip, DatePicker, Button,
} from 'antd';
import {connect} from 'dva';
import ReactDataGrid from 'react-data-grid';
import moment from 'moment'
import {download,renderReport} from '@/utils/utils';
import config from '@/config/config'
import find from 'lodash/find';

const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users:[],
      parseData:[],
      columns:[]
    };
  }

  componentDidMount() {
    const that=this;
    let arr=[
      {name:'采样编号',key:'cybhx',maxValue:'',initValue:''},
      {name:'色度',key:'sd',maxValue:'≤15',initValue:'<5'},
      {name:'肉眼可见物',key:'rykjw',maxValue:'无',initValue:'无'},
      {name:'浑浊度NTU',key:'hzd',maxValue:'≤1',initValue:''},
      {name:'臭和味',key:'chw',maxValue:'无异臭、异味',initValue:'无'},
      {name:'PH值',key:'ph',maxValue:'6.5-8.5',initValue:''},
      {name:'细菌总数CFU/mL',key:'xjzs',maxValue:'≤100',initValue:''},
      {name:'大肠菌群MPN/100mL',key:'dcjq',maxValue:'不得检出',initValue:'未检出'},
      {name:'耐热大肠菌群MPN/100mL',key:'fdcjq',maxValue:'不得检出',initValue:'未检出'},
      {name:'二氧化氯mg/L',key:'eyhl',maxValue:'0.10-0.80|末梢水≥0.02',initValue:''},
      {name:'高锰酸盐指数(以O2计)mg/L',key:'hyl',maxValue:'≤3',initValue:''},
      {name:'氨(以N计)mg/L',key:'ad',maxValue:'≤0.5',initValue:''},
      {name:'游离氯mg/L',key:'yl',maxValue:'0.3-2.0',initValue:'-'},
    ]
    // let parseData=this.state.parseData
    // for(let i=0;i<arr.length;i++){
    //   parseData[i]={name:arr[i].name,key:arr[i].key}
    //   for(let j=0;j<this.state.originData.length;j++){
    //     parseData[i][`${this.state.originData[j].address}`]=this.state.originData[j][arr[i].key]
    //   }
    // }
    // console.log('parseData',parseData)
    // this.setState({parseData})

    let data=[]
    const items=JSON.parse(JSON.stringify(this.props.editRecord.items));
    let addItem={
      name:'限值',
      items:[]
    };
    for(let i=0;i<arr.length;i++){
      addItem.items.push({
        key:arr[i].key,value:arr[i].maxValue
      })
    }
    items.push(addItem)
    console.log('items',items)
    const columns = [
      { key: "name", name: "",width:180,resizable: true,},
    ];
    for(let i=0;i<items.length;i++){
      if(i===items.length-1){
        columns.push(  { key: items[i].name, name: items[i].name,resizable: true},)
      }else{
        columns.push(  { key: items[i].name, name: items[i].name,resizable: true,
          formatter: (event) => {
              return renderReport(event)
          }},)
      }

    }
    this.setState({
      columns
    },function() {
      for(let i=0;i<arr.length;i++){
        data[i]={name:arr[i].name,key:arr[i].key}
        for(let j=0;j<items.length;j++){
          console.log('items[j]',items[j])
          let exit=find(items[j].items,function(o) {
            return o.key===arr[i].key
          })
          if(exit){
            data[i][`${items[j].name}`]=exit.value
          }
        }
      }

      console.log('data',data)
      this.setState({
        parseData:data
      })
    })
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 14},
      }
    };
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               采样日期
            </span>
            )}
          >
            <span style={{fontWeight:'bold'}}>{this.props.editRecord.sampling_date}</span>
          </FormItem>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               送检单位
            </span>
            )}
          >
            <span style={{fontWeight:'bold'}}>{this.props.editRecord.inspection_unit}</span>

          </FormItem>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               报告编号
            </span>
            )}
          >
            <span style={{fontWeight:'bold'}}>{this.props.editRecord.report_number}</span>

          </FormItem>
        </Form>
        <ReactDataGrid
          columns={this.state.columns}
          rowGetter={i => this.state.parseData[i]}
          rowsCount={this.state.parseData.length}

          minHeight={490}
        />
        <Form style={{marginTop:'10px'}} onSubmit={this.handleSubmit}>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               制表
            </span>
            )}
          >
            <span style={{fontWeight:'bold'}}>{this.props.editRecord.author}</span>

          </FormItem>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               审核
            </span>
            )}
          >
            <span style={{fontWeight:'bold'}}>{this.props.editRecord.reviewer}</span>

          </FormItem>
          <FormItem
            style={{display:'inline-block',width:'33%'}}
            {...formItemLayoutWithLabel}
            label={'原文件'}
          >
            <div onClick={()=>{
              download(`${config.prefix}/water_monthly_reports/${this.props.editRecord.id}/original_files/${this.props.editRecord.original_files[0].key}/download??token=Bearer ${sessionStorage.getItem('token')}`)
            }} title={'点击下载'} style={{color:'blue',cursor:'pointer'}}>
              {this.props.editRecord.original_files[0].name}
            </div>
          </FormItem>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


